import "./index.scss"
import {useRef,useState,useEffect} from "react"
import { Progress } from 'antd';

var timer = null
export default function NotFound({history}){
    const bgstar = useRef()
    const [spanNum,setSpanNum] = useState([])
    let [percent,setPercent] = useState(0)
    
    const gotowhere = ()=>{
        history.push("/login")
    }
    useEffect(()=>{
        spanInit();

        var timer = setInterval(()=>{
            if(percent<100){
                setPercent(++percent)
            }else{
                clearInterval(timer)
                timer = null;
                setPercent(0)
                gotowhere()  // 自动跳转 
            }
        },10)

        return ()=>{
            // 离开组件
            clearInterval(timer)
            timer = null;
            setPercent(0)
        }
    },[])

    // 离开的时候没有清除计数器 
    const spanInit = ()=>{
        var screenW = document.getElementById("bgstar").clientWidth
        var screenH = bgstar.current.clientHeight
        console.log(screenW,screenH)
        for(var i = 0;i<550;i++){
            // 随机位置
            var x = Math.floor(Math.random() * screenW)
            var y = Math.floor(Math.random() * screenH)
            // 随机大小
            var scaler = Math.random() * 1.5 
            // 随机频率 
            var rate = Math.random() * 2.5 
            // 随机颜色
            var r = Math.floor(Math.random() * (255-0) )
            var g = Math.floor(Math.random() * (255-0) )
            var b = Math.floor(Math.random() * (255-0) )
            spanNum.push({
                x:x+'px',
                y:y+'px',
                rate:rate,
                scaler:scaler,
                rgb:`rgb(${r},${g},${b})`
            })
        }
        setSpanNum([...spanNum]);
    }
    return (
        <div className="errorpage" id="bgstar"  ref={bgstar}   >
            <img src='../../assets/images/img/404.jpg' className="errorimg" alt="" /> 
            {
                spanNum.map((l,i)=>(
                    <span key={i} className="span-dots" style={{
                        left:l.x,
                        top:l.y,
                        animationDelay:l.rate+"s",
                        background:l.rgb,
                        transform:`scale(${l.scaler})`
                    }}></span>
                ))
            }
            <div className="process">
                <Progress onClick={gotowhere} type="circle" percent={percent} width={60} strokeColor={{ '0%': '#108ee9',
        '100%': '#87d068',}} />
            </div>
        </div>
    )
}